<template>
  <view class="marker-dialog">
    <view class="marker-info" @click="markerInfoClick">
      <view class="marker-img">
        <image :src="storeImg" mode="aspectFill"></image>
      </view>
      <view class="marker-detail">
        <view class="marker-detail-name">
          <view class="shopName">
            <text>{{shopName}}</text>
            <!-- 天虹购物商场 (相城大道天虹商场负一楼最北侧) -->
          </view>
          <view class="question" @click.stop="questionClick">
            <image src="@/static/images/question.png" mode=""></image>
            <text>遇到问题</text>
          </view>
        </view>
        <view class="marker-detail-time">
          <image src="@/static/images/time.png" mode=""></image>
          <text>
            <!-- 营业时间：24小时营业 -->
            <text>{{workTime}}</text>
          </text>
        </view>
        <view class="marker-detail-location">
          <image src="@/static/images/locatedIcon.png" mode=""></image> <text>{{address}}</text>
        </view>
      </view>
    </view>
    <view class="powerBankEnabled" @click="markerInfoClick">
      <view class="enabled">
        <image src="@/static/images/powerbook.png" mode=""></image> <text>可用</text>
      </view>
      <view class="disabled">
        <text>不可还（卡槽已满）</text> 
      </view>
    </view>
    <view class="pownerBanNotice">
      <text>
        3分钟内归还免费，2元/30分钟，28元/24小时，总封顶99元
      </text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        shopName: '',
        workTime: '',
        address: '',
        storeImg: '',
        shopId: ''
      }
    },
    props: {
      distance: {
        type: [Object, String]
      },
      locationInfo: {
        type: [Object, Array]
      }
    },
    watch: {
      locationInfo: {
        handler(newVal) {
          if (newVal) {
            const env = process.env.NODE_ENV === 'production' ? require('@/utils/prod.env') : require('@/utils/dev.env')
            const {
              address,
              titles,
              storeStartTime,
              storeEndTime,
              storeImg,
              id
            } = this.locationInfo
            this.shopName = titles
            this.address = address
            this.workTime = `${storeStartTime} - ${storeEndTime}`
            this.storeImg = `${env.API_BASE_URL}${storeImg}`
            this.shopId = id
          }
        }
      }
    },
    methods: {
      markerInfoClick() {
        uni.navigateTo({
          url: `/subpkg/shopInfo/index?distance=${this.distance}&locationInfo=${JSON.stringify(this.locationInfo)}`
        })
      },
      questionClick() {
        const shopInfo = {
          shopName: this.shopName,
          address: this.address,
          workTime: this.workTime,
          id: this.shopId
        }
        uni.navigateTo({
          url: `/subpkg/feedback/index?shopInfo=${JSON.stringify(shopInfo)}`
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .marker-dialog {
    padding-top: 15px;
    .marker-info {
      padding: 0 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .marker-img {
        width: 70px;
        height: 70px;

        image {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .marker-detail {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 70px;

        .marker-detail-name {
          margin-left: 12px;
          display: flex;
          padding-bottom: 8px;

          .shopName {
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 0.6;
          }

          .question {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 11px;
            margin-right: 10px;
            color: #105BDE;
            flex: 0.4;

            image {
              width: 12px;
              height: 12px;
              object-fit: contain;
              margin-top: 2px;
              margin-right: 5px;
            }
          }
        }

        .marker-detail-time,
        .marker-detail-location {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #555555;
          margin-left: 12px;
          padding-bottom: 8px;

          image {
            width: 12px;
            height: 12px;
            object-fit: contain;
          }

          text {
            margin-left: 5px;
          }
        }
      }
    }

    .powerBankEnabled {
      padding: 0 12px;
      display: flex !important;
      align-items: center;
      margin: 15px;
      height: 34px;
      background-color: #f8f8f8;

      .enabled {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #105BDE;

        image {
          width: 13px;
          height: 17px;
          object-fit: contain;
        }

        text {
          margin-left: 8px;
        }
      }

      .disabled {
        margin-left: 27px;
        font-size: 14px;
        color: #EA6436;
      }
    }

    .pownerBanNotice {
      font-family: 'PingFang-SC-Regular', sans-serif;
      color: #979797;
      font-size: 14px;
      background-color: #f8f8f8;
      height: 50px;
      padding: 10px 14px 0;
    }
  }
</style>